<template>
  <div>
    <el-row
      type="flex"
      align="middle"
      style="margin-bottom: 10px"
    >
      <el-col
        :sm="3"
        :lg="2"
        >项目简称：</el-col
      >
      <el-col
        :sm="5"
        :lg="5"
        :pull="1"
      >
        <el-select
          style="width: 100%"
          v-model="project"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col
        :sm="3"
        :lg="2"
        >分部名称：</el-col
      >
      <el-col
        :sm="5"
        :lg="5"
        :pull="1"
        ><el-select
          style="width: 100%"
          v-model="davisName"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-row
        :sm="3"
        :lg="2"
        >物资名称：</el-row
      >
      <el-col
        :sm="5"
        :lg="5"
        ><el-select
          style="width: 100%"
          v-model="materName"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col
        :sm="5"
        :lg="3"
        :push="1"
      >
        <el-button type="primary">查询</el-button
        ><el-button plain>重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="1">
        <el-button
          type="primary"
          icon="el-icon-plus"
        >
          新增</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="project"
          label="项目简称"
          align="center"
        />
        <el-table-column
          prop="davisName"
          label="分部名称"
          align="center"
        />
        <el-table-column
          prop="materName"
          label="物资名称"
          align="center"
        />
        <el-table-column
          prop="status"
          label="验收状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text">
              <span
                v-if="scope.row.status == 0"
                style="color: #f56c6c"
                >未通过</span
              >
              <span
                v-else-if="scope.row.status == 1"
                style="color: #67c23a"
                >已通过</span
              >
              <span
                v-else
                style="color: #e6a23c"
                >待审核</span
              >
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="selfExamineMan"
          label="自检负责人"
          align="center"
        />
        <el-table-column
          prop="otherExam"
          label="第三方专检"
          align="center"
        >
          <template slot-scope="{row,$index}">
            <input
                type="file"
                ref="clearFile"
                @change="getFile($event, row.id)"
                multiple="multiplt"
                class="add-file-right-input"
                accept=".docx,.doc,.pdf,.xls"
                style="display: none"
              />
            <div v-if="row.otherExam == null">
              
              <el-button
                type="text"
                size="mini"
                @click="uploadFile($index)"
                >上传<i class="el-icon-upload el-icon--right"></i
              ></el-button>
              <!-- <el-button
                type="primary"
                @click="submitAddFile(scope.row.id)"
                size="small"
                >开始上传</el-button
              > -->
            </div>
            <div
              v-else
              class="fileBox"
            >
              <!-- <el-button
                  class="uploadBtn"
                  type="primary"
                  size="mini"
                  @click.stop="uploadFile"
                  >上传<i class="el-icon-upload el-icon--right"></i
                ></el-button> -->
              <div
                @click="showFile(item)"
                v-for="(item, index) in row.otherExam"
                :key="index"
                class="fileBox-item"
              >
                <img
                  v-if="item.type === 'application/msword'"
                  :src="require('../../../assets/word.png')"
                  alt=""
                  :title="item.name"
                />
                <img
                  v-else-if="item.type === 'application/pdf'"
                  :src="require('../../../assets/pdf.png')"
                  alt=""
                  :title="item.name"
                />
                <img
                  v-else
                  :src="require('../../../assets/excel.png')"
                  alt=""
                  :title="item.name"
                />
              </div>
              <el-button
                class="uploadBtn"
                type="text"
                size="mini"
                @click.stop="uploadFile($index)"
                >上传<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      project: '',
      davisName: '',
      materName: '',
      date: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      tableData: [
        {
          id: 1,
          project: 'xx号线轨道1工区',
          davisName: '普通无砟道床轨道',
          materName: '钢弹簧浮制板',
          status: 0, //0未审核 1审核通过2审核不通过
          selfExamineMan: '张三',
          otherExam: null,
        },
        {
          id: 2,
          project: 'xx号线轨道2工区',
          davisName: '普通无砟道床轨道',
          materName: '钢弹簧浮制板',
          status: 1, //0未审核 1审核通过2审核不通过
          selfExamineMan: '张三',
          otherExam: null,
        },
        {
          id: 3,
          project: 'xx号线轨道3工区',
          davisName: '普通无砟道床轨道',
          materName: '钢弹簧浮制板',
          status: 2, //0未审核 1审核通过2审核不通过
          selfExamineMan: '张三',
          otherExam: [
            {
              name: '测试文件.doc',
              size: 10240,
              type: 'application/msword',
              filePath: '../../../assets/files/测试文件.doc',
            },
          ],
        },
      ],
      // 文件
      addArr: [],
      src: null,
    }
  },

  mounted() {
    this.renderData = this.tableData
  },

  methods: {
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      //   this.getCompanyApi(this.currentPage,v)
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v
      //   this.getCompanyApi(v,this.pageSize)
    },
    editHandler(row) {
      console.log('row::: ', row)
    },
    deleteHandler(id) {
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.renderData = this.renderData.filter((el) => el.id !== id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //获取文件对象
    getFile(event, id) {
      console.log('id::: ', id);
      this.addArr = []
      this.renderData.forEach((el) => {
        if (el.id === id) {
          var file = event.target.files
          for (var i = 0; i < file.length; i++) {
            //    上传类型判断
            var imgName = file[i].name
            var idx = imgName.lastIndexOf('.')
            if (idx != -1) {
              var ext = imgName.substr(idx + 1).toUpperCase()
              ext = ext.toLowerCase()
              if (
                ext != 'pdf' &&
                ext != 'doc' &&
                ext != 'docx' &&
                ext != 'xls'
              ) {
                this.$message.error('文件格式不正确，请重新上传格式为doc、docx、xls、pdf的文件')
              } else {
                const filePath = URL.createObjectURL(file[i])
                file[i].filePath = filePath
                this.addArr.push(file[i])
              }
            } else {
                console.log('2::: ', 2);
            }
          }
          if (el.otherExam === null) {
            el.otherExam = this.addArr
          } else {
            el.otherExam.push(this.addArr)
          }
        }
      })
      //   console.log('this.addArr::: ', this.addArr)
    },
    //    数据提交
    submitAddFile(v) {
      console.log('v::: ', v)
      //   this.renderData.forEach((el) => {
      //     if (el.id === v) {
      //       el.otherExam = this.addArr
      //     }
      //   })

      /*
      if (0 == this.addArr.length) {
        this.$message({
          type: 'info',
          message: '请选择要上传的文件',
        })
        return
      }
      var formData = new FormData()
      formData.append('num', this.addType)
      formData.append('linkId', this.addId)
      formData.append('rfilename', this.addFileName)
      for (var i = 0; i < this.addArr.length; i++) {
        formData.append('fileUpload', this.addArr[i])
      }
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: this.token,
        },
      }
      this.axios
        .post(apidate.uploadEnclosure, formData, config)
        .then((response) => {
          if (response.data.info == 'success') {
            this.$message({
              type: 'success',
              message: '附件上传成功!',
            })
          }
        })
    },*/
    },
    uploadFile(index) {
      document.getElementsByClassName('add-file-right-input')[index].click()
    },
    // 文件预览
    showFile(v) {
      if (v.name === '测试文件.doc') {
        let file = null
        fetch(v.filePath)
          .then((res) => res.blob)
          .then((blob) => {
            console.log('blob::: ', blob);
            const fileName = v.name
            file = new File(['测试文件'], fileName)
            this.src = URL.createObjectURL(file)
            // 创建a 标签
            const a = document.createElement('a')
            const e = document.createEvent('MouseEvents') // 创建鼠标事件对象
            e.initEvent('click', false, false) // 初始化事件对象
            a.href = this.src // 设置下载地址
            a.download = v.name // 设置下载文件名
            a.dispatchEvent(e)
          })
      } else {
        // 创建a 标签
        const a = document.createElement('a')
        const e = document.createEvent('MouseEvents') // 创建鼠标事件对象
        e.initEvent('click', false, false) // 初始化事件对象
        a.href = v.filePath // 设置下载地址
        a.download = v.name // 设置下载文件名
        a.dispatchEvent(e)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.fileBox {
  width: 100%;
  height: 100%;
  //   position: relative;
  //   top: 0;
  //   left:0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  img {
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }
  img:hover {
    background-color: rgb(228, 228, 228);
    border-radius: 5px;
  }
  .uploadBtn {
    display: none;
    // position: absolute;
    // left: calc(50% - 35px);
    // top: calc(50% - 15px);
  }

  //   .fileBox-item:hover .uploadBtn {
  //     display: block;
  //   }
}
.fileBox:hover .uploadBtn {
  display: block;
}
</style>
